<template>
  <div>
    <Phead />
    <Pmsg />
    <div class="personal-content w clearfix">
         <Pmy />
            <div class="right identity">
            <h3 class="stamp">认证中心</h3>
            <ul class="change clearfix">
                <li class="active">采购方认证</li>
            </ul>
                 
            <div class="identity-content">
                <form action="">
                    <table>
                        <tbody>
        
                            <tr v-for="(item,index) in msg" :key="index">
                                <td>{{item.label}}：</td>
                                <td><input @blur="getVal" :type="item.type" :placeholder="item.placehold" :id="item.id" :data-index="index" value="">
                                </td>
                              
                            </tr>
                            <tr class="line2">
                                <td></td>
                            </tr>
                            <tr>
                                <td>所在省市：</td>
                                <td class="ip">
                                    <select v-model="province_id" @change="chosePro">
                                      <option value="0">请选择</option>

                                      <option v-for="(item,index) in provinceList" :key="index" :value="item.value" >{{item.text}}</option>
                                    </select>
                                    <span>/</span>
                                    <select v-model="city_id" @change="choseCity">
                                      <option value="0">请选择</option>
                                      
                                      <option v-for="(item,index) in cityList" :key="index" :value="item.area_id" >{{item.area_name}}</option>
                                    </select>
                                    <span>/</span>
                                    <select v-model="area_id">
                                      <option value="0">请选择</option>
                                      
                                      <option v-for="(item,index) in areaList" :key="index" :value="item.area_id" >{{item.area_name}}</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>通讯地址：</td>
                                <td>
                                  <input @blur="getVal1" type="text" placeholder="请填写" data-tag="post_addr" value="" /> 
                                </td>
                            </tr>
                        <tr>
                              <td>医院类型：</td>
                              <td class="hospital">
                              <select v-model="hospital_type1" @change="choseType">
                                  <option v-for="(item,index) in hospitalType1List" :key="index" :value="item.value" >{{item.text}}
                                  </option>
                              </select>
                              <span>/</span>
                              <select v-model="hospital_type2">
                                  <option value="">请选择</option>
                                  <option v-for="(item,index) in hospitalType2List" :key="index" :value="item.value" >{{item.text}}
                                  </option>
                              </select>
                              </td>
                        
                        </tr>
                        <tr>
                           <td>税务登记号：</td>
                           <td>
                            <input @blur="getVal1" type="text" placeholder="请填写" data-tag="tax_register_num" value="" />
                           </td>
                        </tr>

                        <tr>
                            <td>邀请码：</td>
                            <td>
                              <input @blur="getVal1" type="text" placeholder="选填" data-tag="invite_code" value="" />
                            </td>
                        </tr>
                        <tr class="line2">
                            <td></td>
                        </tr>
                        <tr class="file">
                            <td rowspan="2">
                                <h2>营业执照扫描件</h2>
                                <div class="upload imgLog2" :style="yingyeImgCss">
                                        <input data-tag="yingyeImg" @change="filesAdded" type="file" />
                                  </div>
                            </td>
                            <td rowspan="2">
                                <h2>医疗机构执业许可证</h2>
                                <div class="upload imgLog2" :style="zhiyeImgCss">
                                        <input data-tag="zhiyeImg" @change="filesAdded" type="file" />
                                </div>
                            </td>
                        </tr>
                        </tbody>
                        </table>
                        <!-- <h4><input type="checkbox" name="" id="" checked>注册代表同意<span>（采购方注册协议）</span></h4> -->
                        <button type="button" @click="submit">立即认证</button>
                </form>
            </div>
        </div>



    </div>     
  

  <Pfoot />
      <!-- 表单验证 -->
      <Pdailog :is-show="formAlertShow" @on-close="formAlertClose" >
           <div slot="main">{{formAlertText}}</div>
      </Pdailog>
      <!-- 确认提交 -->
      <Pdailog :is-show="fomePushShow" :is-confirm="true"  @on-close="formAlertClose" @on-confirm="confirmPush">
           <div slot="main">{{fomePushText}}</div>
      </Pdailog>
  </div>

</template>
<script>
import Phead from '@/components/Phead.vue'
import Pfoot from '@/components/Pfoot.vue'
import Pmy from '@/components/Pmy.vue'
import Pmsg from '@/components/Pmsg.vue'
import Pdailog from '@/components/Pdailog.vue'
    
export default {
  data(){
    return{
        action: {
            target: this.api_url+'/index/upfile/',
            fileName:'fileData',
            // prop: 'base64Value'
        },
        msg: [{  //  用户名至负责人循环数据
          label: '登录名',
          id: 'user_name',
          type: 'text',
          placehold: '大小写字母数字5-15位',
          bindinput: 'getVal',
          val: '',
          reg: '^[A-Za-z0-9]{5,15}$'
        }, {
          label: '密码',
          id: 'user_pass',
          type: 'password',
          placehold: '6~18 大小写字母数字',
          bindinput: 'getVal',
          val: '',
          reg: '^[a-zA-Z0-9]{6,18}$'
        }, {
          label: '确认密码',
          id: 'aginPwd',
          type: 'password',
          placehold: '两次密码需一致',
          bindinput: 'getVal',
          val: '',
          reg: '^[a-zA-Z0-9]{6,18}$'
        }, {
          label: '医院名称',
          id: 'company_name',
          type: 'text',
          placehold: '请填写',
          bindinput: 'getVal',
          val: '',
          reg: '^[\u4E00-\u9FA5A-Za-z0-9_]{2,40}$'
        },{
          label: '负责人',
          id: 'agent',
          type: 'text',
          placehold: '请填写',
          bindinput: 'getVal',
          val: '',
          reg: '^[\u4E00-\u9FA5A-Za-z0-9]{2,40}$'
        }],

        //医院类型
        hospitalType1List:'',
        hospitalType2List:'',
        hospital_type1: 0,
        hospital_type2: 0,       
        post_addr:'',
        tax_register_num:'',
        //邀请码
        invite_code:'',

        provinceList:'',
        cityList:'',
        areaList:'',

        yingyeImg: '',
        zhiyeImg:'',
        yingyeImgCss:'',
        zhiyeImgCss:'',

        msg2: {
          label: '通讯地址',
          id: 'post_addr',
          type: 'text',
          placehold: '请填写',
          bindinput: 'getVal2',
          val: '',
          reg: '^[\\S]{3,50}$'
        },
        msg3: {
          label: '税务登记号',
          id: 'tax_register_num',
          type: 'text',
          placehold: '请填写',
          bindinput: 'getVal3',
          val: '',
          reg: '^[A-Za-z0-9]{2,40}$'
        },
        
        province_id: '',
        city_id: '',
        area_id: '',
        address_txt:'',//地址，文字
        type_txt:'',//医院类型，文字

        checked: true, 
        //form 错误提示
        formAlertShow:false,
        formAlertText:'提示',
        //form 提交确认
        fomePushShow:false,
        fomePushText:'提示',
        formData:{}
          
     }
  },
  async created(){
    let re =  await this.$axios.post('/index/getProList') 
        //如果是医院 ，且审核通过
        if(re.code == 200){
            this.provinceList = re.data       
        }
    let res =  await this.$axios.post('/index/getHospitalType1') 
        if(res.code == 200){
            this.hospitalType1List = res.data       
        }

  },
  
  mounted(){
    
            
  },
  components: {
    Phead,
    Pfoot,
    Pmy,
    Pmsg,
    Pdailog

  },
  
  methods:{
    submit() {
        let that = this;
        let userInfo = this.getUserInfo()
        let formData ={}
        let arr = this.msg;
        for (let i = 0; i < arr.length; i++) {
                formData[arr[i].id] =arr[i].val;
          if (arr[i].val === "") {
            this.formAlertShow =true
            this.formAlertText =`请输入${arr[i].label}`
            
            return false;
          } else if (new RegExp(arr[i].reg).test(arr[i].val) != true) {
            this.formAlertShow =true
            this.formAlertText =`${arr[i].label}格式不正确`

            return false;
          }
        }
        if(this.post_addr == ""){
          this.formAlertShow =true
          this.formAlertText =`请输入通讯地址`
           
          return false;
        } else if (new RegExp('^.{2,40}$').test(this.post_addr) != true){
          this.formAlertShow =true
          this.formAlertText =`通讯地址格式不正确`

          return false;
        }else if (this.tax_register_num == "") {
          this.formAlertShow =true
          this.formAlertText =`请输入税务登记号`
            
          return false;
        } else if (new RegExp('^[A-Za-z0-9]{2,40}$').test(this.tax_register_num) != true) {
          this.formAlertShow =true
          this.formAlertText =`税务登记号格式不正确`
            
          return false;
        }else if (arr[1].val != arr[2].val) {
          this.formAlertShow =true
          this.formAlertText =`两次密码不一致`
            
          return false;
        } 
        if(this.province_id == "" || this.city_id == "" ||this.area_id == ""){
          this.formAlertShow =true
          this.formAlertText =`请选择省市`

          return false;
        }
         if(this.hospital_type1 == 0){
          this.formAlertShow =true
          this.formAlertText =`请选择确认医院类型`
          
          return false;
        }


        if(this.yingyeImg == ''){
          this.formAlertShow =true
          this.formAlertText =`请上传营业执照扫描件`
        
          return false;
        } 
         if(this.zhiyeImg == ''){
           this.formAlertShow =true
           this.formAlertText =`请上传医疗机构执业许可证`
            
            return false;
        } 


         formData['post_addr'] = this.post_addr //通信地址
         formData['tax_register_num'] = this.tax_register_num // 税务登记号

        formData['hospital_type1'] = this.hospital_type1;
        formData['hospital_type2'] = this.hospital_type2;

        formData['province_id'] = this.province_id;
        formData['city_id'] = this.city_id;
        formData['area_id'] = this.area_id;
        formData['yingyeImg'] = this.yingyeImg;
        formData['zhiyeImg'] = this.zhiyeImg;
        //邀请码
        formData['invite_code'] = this.invite_code;
        this.formData = formData

        this.fomePushShow = true
        this.fomePushText = '可发布竞价信息，确认认证为采购方？'
         
      },
    
     getVal:function(e){
        let arr = this.msg;
        let obj = arr[e.currentTarget.getAttribute('data-index')]
        obj.val = e.target.value
        this.msg = arr
      },
      getVal1:function(e){
        let tag = e.currentTarget.getAttribute('data-tag')
        this[tag] = e.target.value
      },
      //所在省市区选择
      chosePro(){
          let that = this
          let re =  this.$axios.post('/index/getListArea',{
                    parent_id:this.province_id
                  }).then(function(re){
                      if(re.code == 200){
                          that.cityList =re.data
                      }
                  })

        },
        //所在省市选中
        choseCity(){
          let that = this
          let re =  this.$axios.post('/index/getListArea',{
                    parent_id:this.city_id
                  }).then(function(re){
                      if(re.code == 200){
                          that.areaList =re.data
                      }
                  })
            

        },

     //选择医院类型
        choseType(){
          let that = this
          let re =  this.$axios.post('/index/getHospitalType2',{
                    parent_id:this.hospital_type1
                  }).then(function(re){
                      if(re.code == 200){
                          that.hospitalType2List =re.data
                      }
                  })
            

        },
    //上传那图片
      filesAdded(e) {
          //取图片文件，这里只取了数组中第一张图片
          console.log(e.target.files)
          let files = e.target.files
          let tag = e.target.getAttribute('data-tag')
          const limitSize = 1 * 1024;
          const maxSize = 3 * 1024 * 1024;
          let hasIgnore = false
          let hasNotImg =false
          for (let i = 0; i< files.length; i++) {
            const file = files[i];
            // 如果选择的图片大小最大限制（这里为3M）则弹出提示
            if(file.size > maxSize){
              file.ignore = true
               hasIgnore = true
            }
            if(file.type != 'image/jgeg' && file.type != 'image/jpeg' && file.type != 'image/png'){
              hasNotImg = true
            }            
          }
          if(hasIgnore == true){
            this.formAlertShow =true
            this.formAlertText ='图片不能大于3M'

            return false;
          }else if(hasNotImg == true){
            this.formAlertShow =true
            this.formAlertText ='非图片文件，请上传jpg或者png格式图片'

          }else{
            let that =this
            let fd = new FormData();
            fd.append("fileData", files[0]);
            let config = {
                  headers:{'Content-Type':'multipart/form-data'}
            };      
            this.$axios.post('/index/upfile',fd,config).then(function(data) {
                if(data.code==200){
                    if(tag == 'yingyeImg'){
                        that.yingyeImgCss = 'background:url(' + that.api_url+'/uploads/'+data.data + ') no-repeat center/contain'
                        that.yingyeImg = data.data;
                    }

                    if(tag == 'zhiyeImg'){
                        that.zhiyeImgCss = 'background:url(' + that.api_url+'/uploads/'+data.data + ') no-repeat center/contain'
                        that.zhiyeImg = data.data;
                    }
                    
                }

            });

          }

        },
        
        //表单错误提示弹框
        formAlertClose(){
            this.formAlertShow = false;
            this.fomePushShow = false;
        },
        //确认提交
        confirmPush(){
                let userInfo = this.getUserInfo()
                let that = this
                
                let re =  this.$axios.post('/login/buyerRegister',{
                  formData:this.formData
                }).then(function(re){
                    if(re.code == 200){
                        userInfo.user_type = 10;//医院
                localStorage.setItem('userInfo',JSON.stringify(userInfo))
                            //   this.is_show = false
                            //   this.show_success = true
                            
                       that.$router.push({path:'/my/usertype'})

                        }else{
                          this.formAlertShow =true
                          this.formAlertText =re.msg
                            
                        }
                })
                 
         },


  }
  


}
</script>